<div id="hand_generat_cost">
    <div class="hand_generat_cost">
        <el-row class="table_search">
            <el-col :span="18">
                <template>
                    <el-input style="width: 220px;font-size: 12px" readonly onclick="showJgTree();" v-model="jigouName" id="jgSel" placeholder="请选择机构"></el-input>
                    <div id="jgFeeUserContent" class="jgFeeUserContent" style="display: none;position: absolute;z-index: 1000;overflow: auto;background:#ffffff;">
                        <ul id="jgFeeUserTree" class="ztree" style="margin-top:0; width:220px;"></ul>
                    </div>
                    <el-input
                            id="costID"
                            placeholder="请输入缴费编号进行搜索"
                            v-model="parameters.keywords1"
                            style="width: 220px;margin-left: 20px;font-size: 12px">
                    </el-input>
                    <el-button @click="searchFun" type="primary" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>
        </el-row>

        <div class="searchBox" style="padding-left: 20px">
            <el-select v-model="parameters.projectType" @change="getPName" placeholder="请选择项目类型" style="width: 220px;">
                <el-option label="请选择项目类型" value=""></el-option>
                <el-option
                        v-for="item in pType"
                        :label="item.projectTypeName"
                        :value="item.projectTypeId" ></el-option>
            </el-select><span style="color: #ff4444">&nbsp;*&nbsp;</span>
            <el-select v-model="parameters.project" placeholder="请选择收费项目" style="margin-left: 5px;">
                <el-option label="请选择收费项目" value=""></el-option>
                <el-option
                        v-for="item in pName"
                        :label="item.projectName"
                        :value="item.projectId">
                </el-option>
            </el-select><span style="color: #ff4444">&nbsp;*&nbsp;</span>
            <el-input
                    id="enterCost"
                    type="number"
                    placeholder="请输入金额"
                    v-model="totalAmt"
                    style="width: 220px;margin-left: 5px;font-size: 12px">
            </el-input><span style="color: #ff4444">&nbsp;*&nbsp;</span>
            <el-button type="primary"
                       class="btnTypeSet"
                       @click="initiatePayment"
                       icon="el-icon-plus">发起缴费</el-button>
        </div>
        <!--表格-->
        <el-table
                ref="multipleTable"
                size="mini"
                :data="tableData"
                style="width: 100%;"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="缴费编号"
                    prop="feeId"
                    align="center"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="用户姓名"
                    prop="feeUserName"
                    align="center"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="联系方式"
                    prop="telNo"
                    align="center"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="一级机构"
                    prop="oneDept"
                    align="center"
                    width="220">
            </el-table-column>
            <el-table-column
                    label="二级机构"
                    prop="twoDept"
                    align="center"
                    width="220">
            </el-table-column>
        </el-table>

        <!-- 分页-->
        <div class="footerBox">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :current-page.sync="currentPage"
                    :total="totalCount">
            </el-pagination>
        </div>{{isOverflow}}
    </div>
</div>
<script>
    $(function () {
        placeHolde("#jgSel","请选择机构");
        placeHolde("#costID","请输入缴费编号");
        placeHolde("#enterCost","请输入金额");
    });

    var layer,
        loadHand;
    layui.use('layer', function(){
        layer = layui.layer;
        loadHand  = layer.load(1, {shade: [0.5, '#000']});

    });

    // 当前页机构zTree
    var jgSetting = {
        check: {
            enable: true,
//            chkStyle: "checkbox",
//            chkboxType: { "Y": "p", "N": "s" }
        },
        data: {
            simpleData: {
                enable: true,
//                rootId: 0
            }
        },
        callback: {
            beforeClick: beforeClickJg,
            onCheck: onCheckJg
        }
    };
    function beforeClickJg(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("jgFeeUserTree");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    function onCheckJg(e, treeId, treeNode) {
        var jgTree = $.fn.zTree.getZTreeObj("jgFeeUserTree"),
            jgNodes = jgTree.getCheckedNodes(true),
            checkJg = '',
            jgVal = "";
        for (var i=0, l=jgNodes.length; i<l; i++) {
            jgVal += jgNodes[i].name + ",";
            if(!jgNodes[i].isParent){
                checkJg +=  jgNodes[i].id + ',';
            }
        }
        if (jgVal.length > 0 ) jgVal = jgVal.substring(0, jgVal.length-1);
        if (checkJg.length > 0 ) checkJg = checkJg.substring(0, checkJg.length-1);
        hand_generat_cost.jigouName = jgVal;
        hand_generat_cost.parameters.treeId = checkJg;
//        console.log(hand_generat_cost.jigouName);
//        console.log(hand_generat_cost.parameters.treeId);
    }
    function showJgTree() {
        var cityObj = $("#jgSel");
        var cityOffset = $("#jgSel").offset();
        $("#jgFeeUserContent").slideDown("fast");

        $.post("${basePath}merchant/dept/togetDeptTree", function (json) {
            var treeObj = $.fn.zTree.init($("#jgFeeUserTree"), jgSetting, json.t);
            //默认展开所有节点
            //treeObj.expandAll(true);
        });
        $("body").bind("mousedown", onBodyDown);
    }
    function jgHideMenu() {
        $("#jgFeeUserContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" ||
            event.target.id == "jgSel" ||
            event.target.id == "jgFeeUserContent" ||
            $(event.target).parents("#jgFeeUserContent").length>0)) {
            jgHideMenu();
        }
    }

    var hand_generat_cost =
        new Vue({
            el: "#hand_generat_cost",
            data: {
                isShowingBox:false,
                showDelBtn:false,

                ismodalClose:false,

                jigouName:'',
                tableData:[],//表格数据
                pType:[], // 项目类型
                pName:[], // 收费项目
                totalAmt:'', // 金额输入框
                // 分页
                currentPage: 1,
                totalCount:'',
                totalPage:'',
                parameters:{
                    'currentPage':'',
                    keywords1:'',
                    treeId:'',
                    projectType:'',
                    project:'',
                },
                multipleSelection: [],
            },
            methods: {
                backHome:function () {
                    this.closeAddDialog();
                    this.isShowingBox = false;
                    this.dialogAddProjectTypeVisible = false;
                    this.dialogAmendProjectTypeVisible=false;
                },
                /**
                 * 点击X关闭模态框
                 * */
                closeAddDialog:function () {
                    this.isShowingBox = false;
                    this.dialogAddProjectTypeVisible = false;
                    this.dialogAmendProjectTypeVisible=false;
                },
                // 搜索
                searchFun: function(){
                    if(this.parameters.keywords1 == '' && this.parameters.treeId.length ===0) {
                        reloadPage('${basePath}/merchant/HandPayment/toHandPaymentList');
                    }else {
                        Pagesearch(this, '${basePath}/merchant/HandPayment/handPaymentList', this.parameters, 1,
                            function (resData) {
                                if (resData.status == 'success') {
                                }
                            });
                    }
                },
                // 获取项目名称
                getPName:function(){
                    var options= {'projectTypeId':this.parameters.projectType};
                    sendService('${basePath}/merchant/chargeUnderLine/getPaymentByType', options, function (resData) {
                        if(resData.status == 'success'){
                            hand_generat_cost.pName = resData.t;
                            // 注意`this`指向问题
                            if(hand_generat_cost.parameters.projectType == ''){
                                hand_generat_cost.parameters.project = '';
                            }else if(hand_generat_cost.parameters.projectType != '') {
                                if (hand_generat_cost.pName.length == 0) {
                                    layer.msg('该项目类型下无收费项目', {icon: 2});
                                    //hand_generat_cost.$message.warning('该项目类型下无收费项目');
                                    hand_generat_cost.parameters.project = '';
                                } else {
                                    hand_generat_cost.parameters.project = hand_generat_cost.pName[0].projectId;
                                }
                            }
                        }
                    });
                },
                // 分页加载数据
                handleCurrentChange: function(currentPage){
                    Pagesearch(this,'${basePath}/merchant/HandPayment/handPaymentList', this.parameters,currentPage,
                        function (resData) {
                            if(resData.status == 'success') {

                            }
                        });
                },
                // 全选
                handleSelectionChange:function(selection) {
                    this.multipleSelection = selection;
                    console.log(this.multipleSelection);
                },
                // 发起缴费
                initiatePayment: function () {
                    var multiplArr = new Array();
                    if(this.multipleSelection.length==0){
                        layer.msg('请选择缴费人员', {icon: 2});
                        //this.$message.warning('请选择缴费人员');
                    }else if(this.multipleSelection.length>=1){
                        for (var i=0;i<this.multipleSelection.length;i++) {
                            multiplArr.push(this.multipleSelection[i].feeUserId);
                        }
                    }
                    var options={
                        "projectTypeId":this.parameters.projectType,
                        "projectId":this.parameters.project,
                        "feeUserId" : multiplArr.join(","),
                        "totalAmt": Math.round(this.totalAmt*100)/100
                    };
//                        console.log("options = ");
//                        console.log(options);
                    if(options.projectTypeId==''){
                        //this.$message.warning("请选择项目类型");
                        layer.msg('请选择项目类型', {icon: 2});
                    }
                    if(options.projectId==''){} // 待定
                    if(options.totalAmt==''){
                        //this.$message.warning("请输入缴费金额");
                        layer.msg('请输入缴费金额', {icon: 2});
                    }
                    if(options.projectTypeId!='' && options.totalAmt!='' && options.feeUserId!=''){
                        var that = this;
                        var msg = confirm('确定发起缴费吗？');
                        if(msg){
                            sendService('${basePath}/merchant/HandPayment/insetPayMent', options, function (resData) {
                                if(resData.status == 'success'){
                                    layer.msg(resData.msg, {icon: 6});
                                    //hand_generat_cost.$message.success(resData.msg);
                                    reloadPage('${basePath}/merchant/HandPayment/toHandPaymentList');
                                }
                            });
                        }

                    }
                }
            },
            created: function () {
                // 从后台获取请求数据的URL
                Pagesearch(this,'${basePath}/merchant/HandPayment/handPaymentList', null,1,
                    function (resData) {
                        if(resData.status == 'success'){
                            // 成功后的callback
                            layer.close(loadHand);
                        }
                    });
                // 获取项目类型
                var options={};
                sendService('${basePath}/merchant/mProject/getProjectType', options, function (resData) {
                    if(resData.status == 'success'){
                        hand_generat_cost.pType = resData.t;
                    }
                });
            },
            computed:{
                isOverflow:function () {
                    if(this.isShowingBox){
                        $(".main-right").css({'overflow':"hidden"});
                    }
                    if(!this.isShowingBox){

                        $(".main-right").css({'overflow':"auto"});
                    }

                }
            }
        });
</script>

<style scoped>

    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }


    .hand_generat_cost .title_generat_cost{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }
    .hand_generat_cost .searchBox{
        height: 60px;
        line-height: 60px;
        text-align: left;
        padding-left: 30px;
        margin-bottom: 10px;
        background: #fff;
    }
    .hand_generat_cost .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    .hand_generat_cost .btnTypeSet{
        margin-left: 220px;
    }
    .hand_generat_cost .footerBox{
        width: 100%;
        height: 50px;
        text-align: right;
        background-color: #fff;
        padding-top: 9px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .hand_generat_cost .el-input--suffix .el-input__inner{
        font-size: 12px;
    }
</style>
